<template>
  <div class="details_box">
    <div class="details_header">
      <div class="title" @click="cancelDetails">
        <img src="../../assets/image/back.jpg" class="title_icon" alt="">
        <span class="title_name">返回上一级</span>
      </div>
    </div>
    <div class="details_content">
      <div class="problem_box">
        <div class="problem">
          <li><span class="lable">问题类型：</span> <span class="content">{{ info.qsType }}</span></li>
          <li><span class="lable">问题关键词：</span>
            <span v-for="item in info.keyWords" :key="item" class="content check_item">{{ item }}</span>
          </li>
          <li><span class="lable">问题描述：</span> <span class="content">{{ info.description }}</span></li>
          <li><span class="lable file_lable">附件：</span>
            <span class="content">
              <a-upload :multiple="true" list-type="picture-card" @preview="previewView" :file-list="fileList"
                :showUploadList="{ showRemoveIcon: false }">
              </a-upload>
            </span>
          </li>
        </div>
        <div class="time">
          时间:2022年9月10日 09:00:00
        </div>
      </div>
      <div class="reply_box">
        <div class="reply" :class="{ 'reply_empty': (!replyList || !replyList.length) }">
          <div class="reply_item" v-for="item in replyList" :key="item.id">
            <div class="reply_title" v-if="item.roleType == 0">问题回复：</div>
            <div class="reply_title" v-else>反馈人回复：</div>
            <li v-if="item.roleType == 0"><span class="lable">处理方式：</span>
              <a-radio-group name="radioGroup" disabled v-model:value="item.replyType">
                <a-radio :value="1">线上回复</a-radio>
                <a-radio :value="2">线下沟通</a-radio>
              </a-radio-group>
              <!-- <span class="tips">{{item.tips}}</span> -->
            </li>
            <li v-if="item.replyType == '2'"><span class="lable">处理人：</span>
              <span class="content check_item">{{ item.createdBy }}</span>
            </li>
            <li v-if="item.replyType == '2'"><span class="lable">处理时间：</span> <span
                class="content">{{ item.createdAt }}</span></li>
            <li v-if="item.replyType == '1'"><span class="lable lable_text">“{{ item.createdBy }}”回复</span>
              <a-textarea :disabled="true" class="content" v-model:value="item.reply" />
            </li>
            <li>
              <span class="lable">附件：</span>
              <span class="content file_content">
                <a :href="val.filePath" v-for="val in item.files" :key="val.filePath">
                  <div> {{ val.fileName }}</div>
                </a>
              </span>
            </li>
          </div>

          <div class="reply_item reply_form_bottom" v-if="isReply">
            <div class="reply_title">继续反馈：</div>
            <a-form :model="formState" ref="formAdd" :rules="rules">
              <a-form-item label="反馈内容" placeholder="限制300个字符" name="reply">
                <a-textarea v-model:value="formState.reply" type="textarea" />
              </a-form-item>
              <a-form-item label="附件" placeholder="限制300个字符" name="files">
                <a-upload accept=".png,.jpeg,.PNG,.JPEG,.mp4" :customRequest="customRequest" list-type="picture-card"
                  :file-list="uploadFileList" @preview="handlePreview" @remove="handerRemove">
                  <div v-if="uploadFileList.length < 3">
                    <plus-outlined />
                  </div>
                </a-upload>
              </a-form-item>
            </a-form>
            <div class="item_button">
              <a-button @click="handleAddReply" type="primary">提交</a-button>
            </div>
          </div>

          <p v-if="!replyList || !replyList.length"> 管理员在回复的路上，请耐心等待······</p>
        </div>
        
        <div class="button" v-if="replyList && replyList.length">
          <a-button @click="handlReply" type="primary">未解决，继续反馈</a-button>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import { RollbackOutlined, PlusOutlined, PaperClipOutlined } from '@ant-design/icons-vue';
import column from "./js/column"
import api from '@/api/problem'
import { message } from 'ant-design-vue';
export default {
  components: {
    RollbackOutlined,
    PlusOutlined,
    PaperClipOutlined
  },
  mounted() {
    this.getList();
  },
  data() {
    return {
      info: {
        qsType: "",
        keyWords: [],
        description: "",
        phone: '',
        files: []
      },
      uploadFileList: [],
      replyList: [],
      fileList: [],
      rules: column.addRules,
      formState: {
        reply: "",
        replyType: 1,
        files: []
      },
      isReply: false,
    }
  },
  methods: {
    // 获取详情及回复列表
    getList() {
      api.getInfo({id:this.$route.params.id}).then(res => {
        console.log(res)
        this.fileList = res.data.files.map(item => ({
          uid: item.id,
          name: item.fileName,
          status: 'done',
          url: item.filePath
        }));
        res.data.replyList.forEach(item => {
          if (item.files && item.files.length) {
            item.replyFileList = item.files.map(item => ({
              uid: item.id,
              name: item.fileName,
              status: 'done',
              url: item.filePath
            }))
          }
        });
        this.replyList = res.data.replyList;
        this.info = { ...res.data, keyWords: res.data.keyWords.split(',') };
      })
    },
    // 取消/返回
    cancelDetails() {
      this.reset();
      this.$router.go(-1);
    },
    // 重置
    reset() {
      if (this.isReply) {
        this.$refs.formAdd.resetFields();
        this.fileList = [];
        this.isReply = false;
      }
    },
    // 继续反馈
    handlReply() {
      this.isReply = true;
      setTimeout(() => {
        let docm = document.getElementsByClassName('reply')[0]
        if (docm.scrollHeight > docm.clientHeight) {
          setTimeout(function () {
            docm.scrollTop = docm.scrollHeight;
          }, 0);
        }
      }, 50);
    },
    //预览
    previewView(file){
      console.log(file)
      window.location.href=file.url
    },
    //覆盖上传
    async customRequest(info) {
      let formData = new FormData();
      formData.append("file", info.file);
      await api.uploadFile(formData).then(res => {
        const resp = res.data
        if (resp.code == '200') {
          message.success('上传成功');
          this.formState.files.push({
            uid: info.file.uid,
            fileName: resp.data.fileName,
            filePath: resp.data.filePath,
            fileType: resp.data.fileType
          })
          this.uploadFileList.push({
            uid: info.file.uid,
            name: resp.data.fileName,
            status: 'done',
            url: resp.data.filePath
          })
        }
      })
    },
    // 添加回复
    handleAddReply() {
      this.$refs.formAdd
        .validate()
        .then(() => {
          console.log('req',{ ...this.formState, feedbackId: this.$route.params.id, roleType: "1" })
          api.addReply({ ...this.formState, feedbackId: this.$route.params.id, roleType: "1" }).then(res => {
            if (res.code == 200) {
              message.success('添加成功');
              this.reset();
              this.getList();
            }
          })
        })
        .catch((error) => {
          console.log('error', error);
        });
    }
  }

}
</script>
<style lang="scss" scope>
@import "./css/details.scss";
</style>